<template>
  <!-- 我是订单详情页面 -->
  <div class="onorder">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div>
      <van-card
        class="orderlist"
        v-for="item in orderData.orderLines"
        :key="item.id"
        :title="item.product.name"
        :desc="item.product.description"
        :thumb="item.product.photo"
        :price="item.price"
        :num="item.number"
      />
    </div>
    <!-- 底部产品展示区域 -->
    <p class="text">总计¥{{ orderData.total }}</p>

    <div class="botton">
      <p>
        服务地址:{{
          orderData.address.province +
          orderData.address.city +
          orderData.address.area +
          orderData.address.address
        }}
      </p>
      <p>
        联系方式：({{
          orderData.customer.username}}){{orderData.customer.telephone
        }}
      </p>
      <p>下单时间：{{ orderData.orderTime | fmtDate_global }}</p>
      <p>服务时间：{{ orderData.serviceTime | fmtDate_global }}</p>
      <p class="text1">{{ orderData.status }}</p>
    </div>
    <!-- 删除订单按钮 -->
    <div class="buton">
      <van-button @click="disdata(orderData.id)" color="linear-gradient(to right, #ff6034, #ee0a24)"
        >删除订单
      </van-button>
    </div>
  </div>
</template>

<script>
// 引入vuex辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import { get, post_json } from '@/http/axios'
export default {
  data() {
    return {
      // 订单点击跳转到订单详情页面时 传递的订单id
      orderId: this.$route.query.orderId,
    };
  },
  computed: {
    // 获取产品数据
    ...mapState("orderlines", ["orderData"]),
  },
  methods: {
    // 删除订单
        async disdata(id) {
            let res = await get('/order/deleteById', {id});
            console.log(res);
            this.onClickLeft()
        },    
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    // 引入根据栏目id获取产品数据的方法
    ...mapActions("orderlines", ["getorderLinesData"]),
    // 获取订单详情数据
    queryProduct() {
      let data = {
        id: this.orderId,
      };
      // 调用获取订单详情数据的方法
      this.getorderLinesData(data);
    },
  },
  created() {
    // 自动获取订单详情数据
    this.queryProduct();
  },
};
</script>

<style scoped>
.text {
  color: red;
  text-align: right;
  margin-right: 12px;
  font-size: 15px;
}
.text1 {
  margin-bottom: 0;
  text-align: right;
}
.botton {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 1em 0.5em;
  font-size: 13px;
  color: #999;
}
.orderlist {
  box-shadow: 1px 1px 1px 1px rgba(143, 66, 255, 0.4);
  background-color: #fff;
  width: 95%;
  border-radius: 5px;
  margin: 5px auto;
  padding: 5px;
}
.buton{
  text-align: right;
}
</style>